<template>
  <div class="header">
  	<div class="use-action">
  		<span><i class="icon icon-geren"></i>{{username}}<i class="icon icon-icon-down"></i></span>
  		<div class="btn-group">
  			<span class="btn" @click="loginout">退出登陆</span>
  			<span class="btn">修改密码</span>
  		</div>
  	</div>
  	<span class="header-title">{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'header',
  mounted(){
  	this.username = localStorage.getItem('ms_username')
  },
  data () {
    return {
      title: "SP2P后台管理系统",
      username: ''
    }
  },
  methods:{
  	loginout: function () {
  		console.log('退出')
  		localStorage.removeItem('ms_username')
        this.$router.push('/login');
  	}
  }
}
</script>


<!--添加 "scoped" 属性以仅将 CSS 限制到此组件 -->
<style scoped lang="less">
	@import url("../../assets/css/variable.less");
	@import url("../../assets/css/public.less");
	.header{
		&{
			height: 50px;
			line-height: 50px;
			background: @main-dark-bg; 
			color: @title-c1;
		}

		.header-title{
			margin-left: 20px;
			font-size: @ft-large-size;
		}

		.use-action{
			&{
				float: right;
				position: relative;
				margin-right: 20px;
				cursor: pointer;
			}
			&:hover .btn-group{
				display: block;
				-webkit-animation:flipInY 1s ease both;
				-moz-animation:flipInY 1s ease both;
				animation:flipInY 1s ease both;
			}
			&:hover .icon-icon--down{

			}
		}
		.btn-group{
			&{
				.border;
				.transition;
				display: none;
				position: absolute;
				right: 0;
				margin-top: -1px;
				color: @color-1;
				text-align:center;
				line-height: 37px;
				border-bottom:0;
			}
			&:hover{
				.box-shadow;
			}
			
			.btn{
				.border-bottom;
				width: 100%;
				padding: 0;
			}
		}

	}

@-webkit-keyframes flipInY{
0%{-webkit-transform:perspective(400px) rotateY(90deg);
opacity:0}
40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
70%{-webkit-transform:perspective(400px) rotateY(10deg)}
100%{-webkit-transform:perspective(400px) rotateY(0deg);
opacity:1}
}
@-moz-keyframes flipInY{
0%{-moz-transform:perspective(400px) rotateY(90deg);
opacity:0}
40%{-moz-transform:perspective(400px) rotateY(-10deg)}
70%{-moz-transform:perspective(400px) rotateY(10deg)}
100%{-moz-transform:perspective(400px) rotateY(0deg);
opacity:1}
}
</style>
